<!--  -->
<template>
  <div>
    <h1>个人</h1>
    <div id="main" style="width: 800px; height: 400px"></div>
  </div>
</template>

<script>
export default {
  name: "person",
  data() {
    return {
      option: {
        //数据集
        dataset: {
          /* dimensions:["product", "2000", "2001", "2002"], //单独声明维度 */
          //数据
          source: [
            ["product", "2000", "2001", "2002"], //维度也可以直接放在souce的首行
            ["Matcha Latte", 43.3, 85.8, 93.7], //按照上方对应关系
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
          ],
        },
        //x轴
        xAxis: [
          { type: "category", gridIndex: 0 }, //声明x轴为类目型，默认将第一维度放到x，其余的放到y,
          { type: "category", gridIndex: 1 },
        ],
        //y轴
        yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
        //图表在容器中的占比
        grid: [{ bottom: "55%" }, { top: "55%" }],
        //映射,bar是柱状图，line是线状图
        series: [
          //seriesLayoutBy 改变图表行列,默认为column，列，‘product’放在x轴
          {
            type: "bar",
            seriesLayoutBy: "column",
            //设置标签
            label: {
              // `'{@score}'` 表示 “名为 score” 的维度里的值。
              // `'{@[4]}'` 表示引用序号为 4 的维度里的值。
              formatter: "aaa{@[1]}bbb{@[2]}ccc{@[3]}ddd",
            },
            //设置x，y是那一列
            /* encode: { x:1, y:2, tooltip: [1, 3] }, */
          },
          {
            type: "bar",
            seriesLayoutBy: "column",
            /* encode: {
              // 将 "amount" 列映射到 X 轴,也可以直接写数字x：2意思是第二例x轴
              x: 'amount',
              // 将 "product" 列映射到 Y 轴。
              y: "product",
            }, */
          },
          {
            type: "bar",
            seriesLayoutBy: "column",
            /* encode: {
              // 将 "amount" 列映射到 X 轴。
              x: "2000",
              // 将 "product" 列映射到 Y 轴。
              y: "product",
            }, */
          },
          //修改为row，行，将‘2000’，‘2001’，‘2002’放在x轴
          { type: "bar", seriesLayoutBy: "row", xAxisIndex: 1, yAxisIndex: 1 },
          { type: "bar", seriesLayoutBy: "row", xAxisIndex: 1, yAxisIndex: 1 },
          { type: "bar", seriesLayoutBy: "row", xAxisIndex: 1, yAxisIndex: 1 },
        ],
        //图例
        legend: {
          //可滚动，data内放置图标文字，背景色，文字色
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: ["2000", "2001", "2002"],
          backgroundColor: "#ccc",
          textStyle: {
            color: "red",
            // ...
          },
          /* icon: "rect", */
        },
      },
    };
  },
  mounted() {
    console.log("mounted");
    let mychart = this.$echarts.init(document.getElementById("main"));
    mychart.setOption(this.option);
  },
};
</script>
<style scoped>
</style>